<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-form ref="searchForm" class="el-form-col search-form" :model="search">
          <el-row :gutter="15">
            <el-col :lg="4" :md="6">
              <el-form-item prop="inventoryWarehouse">
                <el-select v-model="search.inventoryWarehouse" placeholder="请选择盘点仓库">
                  <el-option v-for="item in warehouseList"
                             :key="item.value"
                             :label="item.text"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="inventoryDistrict">
                <tree-select ref="TreeSelect"
                               :data="menuData"
                               placeholder="请选择盘点区域"
                               v-model="search.inventoryDistrict"
                ></tree-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" v-if="search.state == '1'">
              <el-form-item prop="founderName">
                <el-input v-model="search.founderName" placeholder="创建人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" v-if="search.state == '2'">
              <el-form-item prop="updateName">
                <el-input v-model="search.updateName" placeholder="提交人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="12">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="12">
                    <el-button @click="reset('searchForm')" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="24">
      <el-card>
        <el-row :gutter="15">
          <el-col :span="24">
            <div style="position: absolute;right: 15px;top: -6px;z-index: 100">
              <el-button type="primary" @click="add">新增盘点</el-button>
            </div>
            <el-tabs v-model="search.state" @tab-click="handleClick">
              <el-tab-pane label="盘点中" name="1">
                <el-table
                  :data="tableData1"
                  stripe
                  style="width: 100%"
                  :header-cell-style="{'text-align': 'center'}"
                  :cell-style="{'text-align': 'center'}"
                >
                  <el-table-column
                    label="序号"
                    type="index"
                    width="55">
                  </el-table-column>
                  <el-table-column
                    prop="code"
                    label="盘库编号">
                  </el-table-column>
                  <el-table-column
                    prop="inventoryWarehouseName"
                    label="盘点仓库">
                  </el-table-column>
                  <el-table-column
                    prop="inventoryDistrict"
                    label="盘点区域">
                  </el-table-column>
                  <el-table-column
                    prop="realityAll"
                    label="盘点包件总数">
                  </el-table-column>
                  <el-table-column
                    prop="founderName"
                    label="创建人">
                  </el-table-column>
                  <el-table-column
                    width="180"
                    prop="foundtime"
                    label="创建时间">
                    <template slot-scope="scope">
                      {{ unixTimestampFilter(scope.row.foundtime)}}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        @click="register(scope.row)"
                      ><span>登记数据</span></el-button>
                      <el-button
                        size="mini"
                        type="text"
                        @click="del(scope.row)"
                      ><span>删除</span></el-button>
                      <el-button
                        size="mini"
                        type="text"
                        @click="show(scope.row)"
                      ><span>详情</span></el-button>
                      <!--<a href="javascript:;" class="bule-color" @click="register(scope.row)">登记数据</a>-->
                      <!--<a href="javascript:;" @click="del(scope.row)">删除</a>-->
                      <!--<a href="javascript:;" @click="show(scope.row)">详情</a>-->
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="盘点完成" name="2">
                <el-table
                  :data="tableData2"
                  stripe
                  style="width: 100%"
                  :header-cell-style="{'text-align': 'center'}"
                  :cell-style="{'text-align': 'center'}"
                >
                  <el-table-column
                    label="序号"
                    type="index"
                    width="55">
                  </el-table-column>
                  <el-table-column
                    prop="code"
                    label="盘库编号">
                  </el-table-column>
                  <el-table-column
                    prop="inventoryWarehouseName"
                    label="盘点仓库">
                  </el-table-column>
                  <el-table-column
                    prop="inventoryDistrict"
                    label="盘点区域">
                  </el-table-column>
                  <el-table-column
                    prop="status"
                    label="盘点状态">
                    <template slot-scope="scope">
                      {{ statusFun(scope.row.status)}}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="inventoryYi"
                    width="120"
                    label="盘溢数量">
                    <template slot-scope="scope">
                      <b v-if="scope.row.inventoryYi < 1">{{scope.row.inventoryYi}}</b>
                      <div v-if="scope.row.inventoryYi > 0" style="background: #67C23A;width: 100%;height: 100%;color: #fff">
                        <b>{{scope.row.inventoryYi}}</b>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="inventoryKui"
                    width="120"
                    label="盘亏数量">
                    <template slot-scope="scope">
                      <b v-if="scope.row.inventoryKui < 1">{{scope.row.inventoryKui}}</b>
                      <div v-if="scope.row.inventoryKui > 0" style="background: #F56C6C;width: 100%;height: 100%;color: #fff">
                        <b>{{scope.row.inventoryKui}}</b>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="updaterName"
                    label="提交人">
                  </el-table-column>
                  <el-table-column
                    width="180"
                    prop="updatetime"
                    label="提交时间">
                    <template slot-scope="scope">
                      {{ unixTimestampFilter(scope.row.updatetime)}}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    width="120"
                  >
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        @click="show(scope.row)"
                      ><span>详情</span></el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-col>
          <div class="col-xs-12">
            <Pagination style="margin-top: 20px" class="pull-right" :total-item="totalItem" @pagination="pagination" @sizeChange="sizeChange" :perItem="params.pageSize"></Pagination>
          </div>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import {unixTimestampFilter} from '@/filters'
import {arrayToTree, merge, copy, confirm} from '@/utils'
import {getWarehouse} from '@/utils/selectOptions'
import Pagination from '@/components/Pagination'
export default {
  name: 'warehouseInventoryIndex',
  components: {
    Pagination
  },
  filters: {
    unixTimestampFilter
  },
  data() {
    return {
      searchLoading: false,
      search: {
        inventoryWarehouse: '',
        inventoryDistrict: '',
        founderName: '',
        updateName: '',
        state: '1'
      },
      menuData: [],
      totalItem: 0,
      params: {
        pageSize: 20,
        pageNum: 1
      },
      searchOpen: false,
      warehouseList: [],
      tableData1: [],
      tableData2: []
    }
  },
  created() {
    getWarehouse().then(arr => {
      this.warehouseList = arr || []
      if (this.warehouseList.length === 1) {
        this.search.inventoryWarehouse = this.warehouseList[0].value
      }
    })
    this.getTableData()
  },
  watch: {
    'search.inventoryWarehouse'(val, oldVal) {
      if (val) {
        this.search.inventoryDistrict = ''
        this.getMenuData()
      }
    }
  },
  methods: {
    unixTimestampFilter,
    pagination(page) {
      this.params.pageNum = page
      this.searchFunc()
    },
    sizeChange(size) {
      this.params.pageSize = size
      this.searchFunc()
    },
    reset() {
      this.$refs.searchForm.resetFields()
    },
    handleClick(tab, event) {
      if (this.search.state === '1') {
        this.search.updateName = ''
      } else {
        this.search.founderName = ''
      }
      this.searchFunc()
    },
    searchFunc() {
      this.getTableData()
    },
    statusFun(status) {
      let num = parseInt(status)
      switch (num) {
        case 1 : return '溢'
        case 2 : return '损'
        case 3 : return '亏'
        case 4 : return '亏，损'
        case 5 : return '益，亏'
        case 6 : return '益，亏，损'
      }
    },
    getTableData() {
      let data = copy(this.search, true)
      data = merge(data, this.params)
      this.searchLoading = true
      this.$ajax.table('/ms-warehouse-order/inventory/findInventoryList', data).then(response => {
        let tableData = copy(response.data || [])
        this.totalItem = response.totalItem
        tableData.forEach(item => {
          item.copyStorageCost = item.storageCost
        })
        if (this.search.state === '2') {
          this.tableData2 = tableData
        } else {
          this.tableData1 = tableData
        }
      }).finally(_ => {
        this.searchLoading = false
      })
    },
    getMenuData() {
      this.$ajax.get('/ms-warehouse-order/sorting-maintenance/query-list-warehouse', {werahouseId: this.search.inventoryWarehouse}).then(response => {
        if (!response.data) {
          return
        }
        let arr = response.data
        let temp = []
        arr.forEach(v => {
          temp.push({
            value: v.id,
            text: v.storageRegionName,
            pid: v.pId
          })
        })
        this.menuData = arrayToTree(temp, 'value', 'pid', 'children', '0', true) || []
      })
    },
    del(data) {
      confirm('确定要删除该盘点单吗？', '温馨提示', {
        type: 'warning',
        confirmButtonLoading: true,
        confirmCallBack: ({confirmButtonLoadingClose, close}) => {
          this.$ajax.post('/ms-warehouse-order/inventory/delInventoryInfo', {inventoryId: data.id}).then(response => {
            if (response.success) {
              close()
              this.$message({
                type: 'success',
                message: '删除成功！'
              })
              this.getTableData()
            } else {
              confirmButtonLoadingClose()
            }
          }).finally(_ => {
            confirmButtonLoadingClose()
          })
        }
      })
    },
    add() {
      this.$router.push({path: '/ss-oms/warehouse/inventory/add'})
    },
    register(data) {
      this.$router.push({path: '/ss-oms/warehouse/inventory/register/' + data.id})
    },
    show(data) {
      this.$router.push({path: '/ss-oms/warehouse/inventory/show/' + data.id})
    }
  }
}
</script>

<style scoped>
</style>
